<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'EventOrder.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link href="css/documentation.css" rel="stylesheet" />
	<link href="css/jquery.toolbars.css" rel="stylesheet" />
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<style type="text/css">
		.c{background: gray;color: red;}
	</style>
		<link href="css/bootstrap.icons.css" rel="stylesheet">
		<link href="css/prettify.css" rel="stylesheet">
		<link href="css/sunburst.css" rel="stylesheet">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script src="js/prettify.js"></script>
		<script src="js/jquery.toolbar.js"></script>
  </head>
  
  <body>
    	<div id="event1" align="right" onclick="javascript:alert('1');" style="background: gray; width: 100px;height: 100px;">
    		<input type="button" id="event2" value="EVENT2" onclick="javascript:alert('2');"/>
    	</div>
    	<table align="center" border="1" width="50%" style="height:30px;line-height:30px;text-align: center;" >
    		<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    		<tr><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td></tr>
    		<tr><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td></tr>
    		<tr><td>4</td><td>4</td><td>4</td><td>4</td><td>4</td><td>4</td></tr>
    		<tr><td>5</td><td>5</td><td>5</td><td>5</td><td>5</td><td>5</td></tr>
    	</table>
    	<div style="background-color:gray;width: 100px;">
			<p>这是一个段落。</p>
			<button>请点击这里</button>
		</div>
		<input type="button" id="toolbar" value="TOOLBAR"/>
		<div id="user-options" class="toolbar-icons" style="display: none;">
			<a href="#"><i class="icon-user"></i></a>
			<a href="#"><i class="icon-star"></i></a>
			<a href="#"><i class="icon-edit"></i></a>
			<a href="#"><i class="icon-trash"></i></a>
			<a href="#"><i class="icon-ban-circle"></i></a>
		</div>
  </body>
 	 <script type="text/javascript">
 	 	var a = 1;    
		function b() {    
		    a = 10;    
		    return;    
		    function a() {}    //同理a在这里被重新索引 相当于定义了var a;
		}    
		b();    
		alert(a);  
		
		/**
		 var foo = 1;    
		function bar() {    
		    if (!foo) {    
		        var foo = 10;    //如果这里不加var就是1了，加了var后在预编译时foo会被当做局部变量进行索引,可能有同学基础和我一样不是太好的，在想我外部定义了一个变理，在内部使用都是好好的啊，那你一定要注意了，这里多了个var
		    }    
		    alert(foo);    
		}    
		bar();  
		
		var a = 1;       
		function b() {       
		    a = 10;       
		    return;       
		    function a() {}    //同理a在这里被重新索引   
		}       
		b();       
		alert(a); 
 	 	//只要在变量声明语句之前调用该变量，该变量的值就一定是 undefined，但是如果我们调用一个没有被声明的变量，这个时候会报“变量未定义”的错误，所以我们还必须得明白这两者之间的区别
 	 	var t = "test";
 	 	function testa(){
 	 		alert(t);
 	 		var t = "result";
 	 	}
 	 	testa();
 	 	//
 	 	function a(){
 	 		for(var i=0;i<3;i++){
 	 			if(i == 2) {
　　　　　　　　　　 var j = "我是在for语句内部声明的";
　　　　　　　　 }
 	 		}
 	 		alert(j);
 	 	}
 	 	a();
 	 	//js没有代码块作用于
 	 	var a ="a";
 	 	{
 	 		var a = "b";
 	 	}
 	 	alert(a);
 	 	jQuery(document).ready(function($) {
 	 		$("#toolbar").toolbar({content: '#user-options', position: 'top'});
 	 	});
 	 	*/
 	 	//指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
 	 	$("table").delegate("td","hover",function(){
 	 		$(this).toggleClass("c");
 	 	});
 	 	$("div").delegate("button","click",function(){
 	 		$("p").slideToggle();
 	 	});
 	 	//document.getElementById("event1").style.left = 100;
 	 	//alert(document.getElementById("event1").style.width);
 	 	///alert($("#event1").css("width"));
 	 	//alert($("div").tagName);
 	 	//alert($("div").style.width);
		//document.getElementById("event1").addEventListener('click',function(){alert("test1");},false);   
		//document.getElementById("event2").addEventListener('click',function(){alert("test2");},false); 
	</script>
</html>
